/*
 * 全时云商务服务股份有限公司.
 * Copyright © 2021 京icp备08005473号. All rights reserved.
 * @Date: 2021-09-02.
 * @Author：
 * @Description 小课堂 - 登陆 - 组件
 **/
import React, { memo, useState, useEffect } from "react"
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtForm, AtInput, AtImagePicker } from 'taro-ui'
import './index.scss'

interface Props {
  entranceMode: string // 入学方式
  id?: string // 设置项的 key值
  label?: string // label
}
/**
 *@Description
 *@Return  登陆.
 **/
const Login: React.FC<Props> = props => {

   const [userName, setUserName] = useState("222")
   const [phoneNum, setPhoneNum] = useState("1586656566252")
   const [files, setFiles] = useState( [{url: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.7n9maUPX84tlG0VV-vHQFAHaEo?pid=ImgDet&rs=1'}])

   useEffect(() => {
     setTimeout(() => {
      setUserName("222222")
      setPhoneNum("13956563336")
     }, 2000)
   }, [userName])

  /**
   *@Description
   *@Return  点击 课程列表 - 跳转到详情页.
  **/
  const renderSubmitClick = () => {
    console.log(5252525)

  }
  /**
   *@Description
   *@Return  获取验证码.
  **/
  const renderCodeClick = () => {
    console.log("code")
  }
  /**
   *@Description
   *@Return  点击图片 调用选择 事件监听.
  **/
  const renderImageClick = () => {
    // 选择图片
    Taro.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        console.log("选择照片返回值-----------", res)
        const tempFilePaths = res.tempFilePaths
        // 上传
        const uploadTask = Taro.uploadFile({
          url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
          filePath: tempFilePaths[0],
          name: 'file',
          formData:{
            'user': 'test'
          },
          success: function (uploadRes){
            console.log("上传成功返回值-------------", uploadRes)
            //do something
          }
        })
        uploadTask.progress((res) => {
          console.log('上传进度', res.progress)
          console.log('已经上传的数据长度', res.totalBytesSent)
          console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
        })
        uploadTask.abort() // 取消上传任务
      }
    })
    console.log("Taro.chooseImage--------------------renderImageClick")
  }
  /**
   *@Description
   *@Return  点击图片 左上角❌  事件监听.
  **/
  const renderImageChange = () => {
    console.log("左上角 ---------差号-----renderImageChange")
  }
  /**
   *@Description
   *@Return  图片 上传 失败监听.
  **/
  const renderFail = () => {
    console.log("renderFail")
  }

  return (
    <AtForm className='cou-form-login'>
      <Text className='cou-err-info'>错误的提示信息出现在这里</Text>
      <AtInput clear name='value' type='text' autoFocus focus placeholder='输入姓名（必填）' value={userName} onChange={renderSubmitClick} />
      <AtInput clear name='value' type='phone' maxlength={11} placeholder='输入手机（必填）' value={phoneNum} onChange={renderSubmitClick} />
      <AtInput clear name='value' type='text' maxlength={6} placeholder='输入验证码（必填）' value={userName} onChange={renderSubmitClick}>
        <Text className='cou-code' onClick={renderCodeClick}>获取验证码</Text>
      </AtInput>
      {/* 入学方式 */}
      {props.entranceMode === "code" ? (
        <AtInput clear name='value' type='text' placeholder='入学码（必填）' value={userName} onChange={renderSubmitClick} />
      ) : (
        <View className='cou-upload'>
          <AtImagePicker length={1} files={files} onChange={renderImageChange} onFail={renderFail} onImageClick={renderImageClick} />
          <Text className='cou-upload-tip'>上传支付凭证 支持JPG、PNG格式</Text>
        </View>
      )}
    </AtForm>
  )
}

export default memo(Login)

